<template>
  <div class="main">
    <!-- <el-container style="height: calc(100vh - 64px); border: 1px solid #eee">
      <el-aside width="250px" style="background-color: #fff">
        <el-row>
          <el-col :span="24">
            <el-menu
              active-text-color="#002766"
              default-active="1"
              class="main_menu"
              :router="true"
              :unique-opened="true"
            >
              <el-menu-item index="1" :route="'/main/dataVisual'">
                <i class="el-icon-pie-chart"></i>
                <span slot="title">数据分析</span>
              </el-menu-item>
              <el-menu-item index="2" :route="'/main/userManage'">
                <i class="el-icon-user-solid"></i>
                <span slot="title">用户管理</span>
              </el-menu-item>
              <el-menu-item index="3" :route="'/main/interviewManage'">
                <i class="el-icon-document"></i>
                <span slot="title">面经管理</span>
              </el-menu-item>
              <el-menu-item index="4" :route="'/main/bankManage'">
                <i class="el-icon-document-copy"></i>
                <span slot="title">题库管理</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-container style="height: calc(100vh - 65px);">
        <scroll class="content">
          <router-view></router-view>
        </scroll>
      </el-container>
    </el-container> -->
    <a-layout id="components-layout-demo-custom-trigger">
      <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
        <div class="logo">
          <img src="~assets/img/logo.png" alt="">
        </div>
        <a-menu
          theme="dark"
          mode="inline"
          :default-selected-keys="keys"
          @click="menuClick"
        >
          <a-menu-item key="1">
            <a-icon type="bar-chart" />
            <span>数据可视化</span>
          </a-menu-item>
          <a-menu-item key="2">
            <a-icon type="user" />
            <span>用户管理</span>
          </a-menu-item>
          <a-menu-item key="3">
            <a-icon type="read" />
            <span>面试文章管理</span>
          </a-menu-item>
          <a-menu-item key="4">
            <a-icon type="unordered-list" />
            <span>题库管理</span>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <a-layout-header :style="headerStyle">
          <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="() => (collapsed = !collapsed)"
          />
          <div class="login-out" @click="loginOut">注销</div>
          <h1 class="title">求职小助手-后台管理系统</h1>
        </a-layout-header>
        <a-layout-content :style="contentStyle">
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
// import Scroll from '../../components/scroll/Scroll'
export default {
  name: "Main",
  // components: { Scroll },
  data() {
    return {
      collapsed: false,
      headerStyle: {
        background: "#fff",
        padding: 0,
      },
      contentStyle: {
        margin: "24px 16px",
        padding: "24px",
        background: "#fff",
        minHeight: "100vh"
      },
      path: {
        1: "/main/dataVisual",
        2: "/main/userManage",
        3: "/main/interviewManage",
        4: "/main/bankManage",
      },
    };
  },
  computed: {
    keys() {
      switch (this.$route.path) {
        case '/main/dataVisual' :
          return ['1'];
        case '/main/userManage' :
          return ['2'];
        case '/main/interviewManage' :
          return ['3'];
        case '/main/bankManage' :
          return ['4'];
        default:
          return ['1'];
      }
    }
  },
  methods: {
    menuClick(item) {
      this.$router.push({
        path: this.path[item.key],
      });
    },
    loginOut() {
      const self = this;
      this.$confirm({
        title: "退出登录",
        content: "确定退出登录吗？",
        okText: "确认",
        cancelText: "取消",
        onOk() {
          self.$router.push({ path: "/login" });
          // self.$message.success("已退出登录");
          self.$notification.open({
            message: "退出登录",
            description: "已成功退出登录",
            onClick: () => {
              console.log("Notification Clicked!");
            },
          });
        },
        onCancel() {
          // self.$message.info('取消退出登录');
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
/* .main {
  height: 600px;
}

.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.content {
  width: 100%;
  height: 100%;
} */

#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
  text-align: center;
  line-height: 32px;
  img {
    width: 58px;
    height: 20px;
  }
}

/deep/.ant-layout-header {
  position: relative;
  .title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
  }
}

.login-out {
  float: right;
  margin-right: 30px;
  cursor: pointer;
  &:hover {
    color: #041527;
  }
}
</style>
